import { useMemo } from 'react';
import { Position } from 'reactflow';

import { NodeInputKeyEnum } from '@/types/workflow/constant';
import { ConditionText, IfElseResultEnum } from '@/types/workflow/template/system/ifElse/constant';
import { IfElseListItemType } from '@/types/workflow/template/system/ifElse/type';
import { getElseIFLabel, getHandleId } from '@/types/workflow/utils';

import { SourceHandle } from '../render/Handle';
import { NodeCardProps } from '../render/NodeCard';
import { ReferenceLabel } from '../render/RenderInput/templates/Reference';

function NodeIfElseNodeFolded(props: NodeCardProps) {
  const { nodeId, inputs = [] } = props;
  const elseHandleId = getHandleId(nodeId, 'source', IfElseResultEnum.ELSE);

  const ifElseList = useMemo(
    () =>
      (inputs.find((input) => input.key === NodeInputKeyEnum.ifElseList)
        ?.value as IfElseListItemType[]) || [],
    [inputs],
  );

  console.log('inputs', inputs);

  return (
    <div className="mb-2 px-2 text-gray-600" style={{ minWidth: '400px' }}>
      <div className="flex">
        {/* <div>{'分类'}</div> */}
        <div className="flex w-full flex-1 flex-col gap-2">
          {ifElseList.map((item, index) => {
            const handleId = getHandleId(nodeId, 'source', getElseIFLabel(index));
            return (
              <div
                key={index}
                className="relative flex flex-col gap-2 rounded-xl bg-fill-2 px-3 py-2"
              >
                <div className="font-font-weight-600 text-text-5">{getElseIFLabel(index)}</div>
                <div className="flex w-full">
                  {item.list?.length > 1 && (
                    <div className="ml-6 mr-4">
                      <div className="border-divider-deep z-0 flex h-full w-6 items-center rounded-l-[8px] border border-r-0 border-text-2">
                        <div className="z-10 -ml-6 flex justify-center rounded-md border border-line-2 bg-fill-1 px-2 py-1 text-xs font-font-weight-400 text-text-4">
                          <span className="mr-1">{item.condition}</span>
                        </div>
                      </div>
                    </div>
                  )}
                  <div className="flex w-full flex-col gap-2">
                    {item.list.map((item1, index1) => {
                      return (
                        <div key={index1} className="flex w-full items-center gap-2 text-xs">
                          <div className="flex w-full flex-col gap-2">
                            <div className="flex w-full items-center gap-2">
                              <div
                                className={`flex flex-grow items-center gap-2 rounded-md ${
                                  item1.variable ? 'bg-white ' : 'bg-fill-1'
                                } px-2 py-1`}
                              >
                                {item1.variable ? (
                                  <ReferenceLabel nodeId={nodeId} variable={item1.variable} />
                                ) : (
                                  <span className="text-text-2">输入值</span>
                                )}
                              </div>
                              <div
                                className={`w-[100px] rounded-md ${
                                  item1.condition ? 'bg-white ' : 'bg-fill-1'
                                } px-2 py-1`}
                              >
                                {item1.condition ? (
                                  <span>
                                    {ConditionText[item1.condition as keyof typeof ConditionText]}
                                  </span>
                                ) : (
                                  <span className="text-text-2">选择条件</span>
                                )}
                              </div>
                            </div>
                            <div
                              className={`rounded-md ${
                                item1.value ? 'bg-white ' : 'bg-fill-1'
                              } px-2 py-1`}
                            >
                              {item1.value ? (
                                <span>{item1.value}</span>
                              ) : (
                                <span className="text-text-2">输入值</span>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
                <div className="absolute right-0 top-1/2 -translate-y-1/2">
                  <SourceHandle
                    nodeId={nodeId}
                    handleId={handleId}
                    position={Position.Right}
                    translate={[11, 0]}
                  />
                </div>
                {/* <div className="font-bold">
                  {ifElseList.length - 1 !== index && <div>ELSE IF</div>}
                </div> */}
              </div>
            );
          })}
          <div className="relative mb-2">
            <div className="flex items-center rounded-xl bg-fill-2 p-2">
              <div className="text-md ml-2 font-font-weight-600 text-text-5">
                {IfElseResultEnum.ELSE}
              </div>
              <SourceHandle
                nodeId={nodeId}
                handleId={elseHandleId}
                position={Position.Right}
                translate={[11, 0]}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default NodeIfElseNodeFolded;
